• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Typescript项目注意点和基本类型介绍

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

从typescript源文件到执行的过程

执行者 步骤 说明
TSC 1. TypeScript Source -> TypeScript AST TSC将ts文件转为TS AST(abstract syntax tree)
TSC 2. AST is checked by typechecker TSC的类型检查器对AST做类型检查
TSC 3. TypeScript AST -> Javascript Source TSC将TS AST转为JS的源代码(可能是ES3/5/6)
JS(浏览器/Node.js) 4. Javascript Source -> Javascript AST JS运行时将JS源码转为JS AST
JS(浏览器/Node.js) 5. Javascript AST -> bytecode JS运行时将JS AST 转为字节码,准备运行
JS(浏览器/Node.js) 6. Bytecode is evaluated by runtime JS运行时运行js字节码

其中1-3步是TSC处理的,4-6步为JS运行时处理,可能是浏览器也可能是Node.js。

从上面步骤可以知道,TSC做类型检查是在将TS AST转为JS源码之前,也就是说从TS AST转为JS源码时,是没有做类型检查的。检查类型时针对TS AST的,即第二步。

也意味着TS的类型系统,强类型的各种机制,仅仅对类型检查有用,对产出的JS无影响,增加类型不会污染JS源文件。

关于tsconfig.json

可以通过 tsc –init 创建tsconfig.json文件,如下:

{
  "compilerOptions": {
    "target": "es2015",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": ["es2015"],                             /* Specify library files to be included in the compilation. */
    "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    "outDir": "dist",                        /* Redirect output structure to the directory. */
    "strict": true,                           /* Enable all strict type-checking options. */
    "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
    "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
  }
}

下面主要看几个常用配置:

配置属性 描述
include 告诉TSC在哪里找到ts文件
lib 告诉TSC当前运行时已存在的API,通常包括:ES5的bind,新增数组方法,ES6的新增方法等
module 告诉TSC将ts文件转为那种模块标准的js文件,通常有cmj,cmd,es6等
outDir 告诉TSC将转换后的文件放到哪个目录
strict 告诉TSC是否进行严格的类型检查
target 告诉TSC将ts转换成哪个版本的js,通常有ES3,ES5,ES6等
noImplicitAny 是否允许存在未定义的类型,即隐式类型。TSC不会自己猜测类型
alwaysStrict TSC会在产出的每个js文件中带上use strict语句

关于tslint

可以通过 tslint –init 创建默认的tslint.json文件,如下:

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {},
    "rulesDirectory": []
}

{}类型

当将一个变量设置为{}类型是,意味着此变量的值可以是除了null和undefined之外的任何值。

let a:{} = 1;
let b:{} = Symbol('b');
let c:{} = null; // Type 'null' is not assignable to type '{}'.
let d:{} = undefined; // Type 'undefined' is not assignable to type '{}'.

object类型

当将一个变量设置为object类型时,意味着此变量的值可以是除了字符串,数字,Symbol,null,undefined,布尔值之外的任何值。

let a:object = new Date();
let b:object = function(){};
let c:object = [];
let d:object = new RegExp('');
let e:object = true; // Type 'true' is not assignable to type 'object'.
let f:object = Symbol(); // Type 'symbol' is not assignable to type 'object'.
let g:object = 1; // Type '1' is not assignable to type 'object'.
let h:object = '1'; // Type '"1"' is not assignable to type 'object'.

Object类型

同{}类型。

Value {} object Object
{} Yes Yes Yes
[‘a’] Yes Yes Yes
function(){} Yes Yes Yes
new String(‘a’) Yes Yes Yes
‘a’ Yes No Yes
1 Yes No Yes
Symbol() Yes No Yes
true Yes No Yes
null No No No
undefined No No No

[]类型

当一个变量声明为[]类型时,表示变量的值必须为空数组。如果隐式声明为[],则表示元素的类型为any,即任意类型的值。如:

let a:[] = [];
a = [1]; // Type '[number]' is not assignable to type '[]'.
let b = []; // 隐式声明b为数组,元素类型是any类型
b.push(1);
b.push(null);

Tuples类型

此类型是array的子类型,继承自array类型。Tuples类型的数组必须显式申明其元素的类型,且数组长度不可变。如:

// 声明定长的数组
let arr: [string,number,boolean] = ['a',2,true];

// 二维数组的声明
// 分步解释:
// let data: number[] 表示声明一个元素为数字的数组
// let data: [][] 表示声明一个元素为空数组的数组
// let data: [number, number][] 表示声明一个元素为两个元素的tuples类型的数组,且tuples的两个元素必须都为number类型
// let data: [number, number?][] 表示数组的第二个元素可选
let data: [number, number?][] = [[1,2],[3],[4,5]];

// 声明不定长数组,且指定第一个元素的类型,其他元素类型任意
let data1: [string,...any[]] = ['11','s',32];

枚举类型

枚举类型主要处理两类事务:定义字符串到数字的映射或字符串到字符串的映射。TS会自动将枚举类型的每个成员映射到一个数字,默认是从0开始,也可是是显式定义数字,开始位置自己决定,如:

// 默认从0开始
enum lang {Chinese, English, Russian}; 
let a = lang.Chinese;
console.log(a, lang.English, lang.Russian); // 0, 1, 2
// 定义从3开始
enum lang {Chinese=3, English, Russian}; 
let a = lang.Chinese;
console.log(a, lang.English, lang.Russian); // 3, 4, 5
// 自定义或者自动赋值
enum lang {Chinese=3, English=6, Russian}; 
let a = lang.Chinese;
console.log(a, lang.English, lang.Russian); // 3, 6, 7

看枚举类型被TS转换后的形式,如:

var lang;
(function (lang) {
    lang[lang["Chinese"] = 3] = "Chinese";
    lang[lang["English"] = 9] = "English";
    lang[lang["Russian"] = 10] = "Russian";
})(lang || (lang = {}));
;

我们可以通过数字访问到字符串,通过字符串访问到数字,如:

console.log(lang['English'], lang[lang.English]); // 9 English

readonly修饰符

声明对象的某个属性为readonly

let a: {a:string, readonly b:number} = {a:'2', b:3};
a.b = 4; // Cannot assign to 'b' because it is a read-only property.

声明数组为只读

let as: readonly number[] = [1,2,3];
as.push(2); // Property 'push' does not exist on type 'readonly number[]'.
as.concat(3); // concat函数不会对原数组修改,而是返回新的数组,所以此处合法。

// 还可以这样声明
let arr: ReadonlyArray<string> = ['2'];
arr.push('3'); // Property 'push' does not exist on type 'readonly string[]'.
// 或者
let arr: Readonly<string[]> = ['22'];

声明类的属性为只读。类的只读属性可以在声明的时候赋值,或者构造函数中赋值,其他地方都不允许赋值。如:

class Foo{
    readonly bar = 1;
    readonly baz:string;
    constructor(){
        this.baz = 'hello';
    }
    setBaz(value:string){
        this.baz = value; // Cannot assign to 'baz' because it is a read-only property.
    }
}
console.log(new Foo().baz);

类型的组合

有时候某个变量的值可能需要取其他类型中的某一个类型,这时可以给此变量的类型设置为这些类型的并集,如:

let prop: string|number = 3;
prop = '3'; // 可以被赋值,因为prop可以为string和number类型中的一个

// 数组里可以是字符串也可以是数字
type StringOrNumber = string|number;
let a: StringOrNumber[] = []; // 或者直接这样:let a: (string|number)[] = [];
a.push(1);
a.push('a');
a.push(true); // 类型错误,不可以有布尔类型

type Cat = {name:string, purrs:boolean};
type Dog = {name:string, barks:boolean, wags:boolean}
type CatOrDogOrBoth = Cat|Dog;
let cat: CatOrDogOrBoth = {name: 'John', purrs: true};
// 类型错误 {name: 'John', barks: false} 不属于Cat和Dog中的任何一个类型
let cat2: CatOrDogOrBoth = {name: 'John', barks: false}; 
// 类型错误,同上
let cat3: CatOrDogOrBoth = {name: 'John', wags: false};
// 类型错误, 同上
let cat4: CatOrDogOrBoth = {barks: true, wags: false};
// 属于Cat类型,因为没有barks属性,即不是Dog类型,且完全拥有Cat类型定义的所有属性
let cat5: CatOrDogOrBoth = {name: 'John', purrs: true, wags: false};
// 既是Cat类型也是Dog类型
let cat6: CatOrDogOrBoth = {name: 'John', barks: false, wags: false, purrs:false}

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript系列教程发布时间:2022-07-18
下一篇:
八、TypeScript面向对象特性 - 接口(Interface)发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap