Typescript学习-不能光干看文档，比较重要的地方做下笔记还是有必要的

关注

原创最新推荐文章于 2026-06-10 08:19:11 发布 3.4k 阅读 AI 写同款· GEO 优化 ›

理解和使用 TypeScript 中的接口 JavaScript 为开发人员提供了极大的灵活性。初始化为整数的变量可以在运行时分配一个函数字面量。JavaScript 中的变量类型是不可预测的。正如您在下面的示例中看到的， a初始化为整数，然后分配一个函数字面量：var a = 2}让我们考虑一下建造特斯拉 Model S 汽车的实施计划。十名特斯拉工程师构建了他们的原型模型。在实施之前没有制定规范，所以工程师们都提出了自己的一套规范和实施模型。其中一个原型能够向用户展示汽车充电细节，而另一个原型则配备了轮胎监控系统。阅读详情

类型-unknown和any

unkonwn和any的区别:any类型的变量可以赋值给其他啊任意类型变量；unknown类型的变量不能赋值给其他类型的变量，但可以赋值给unknown类型和any类型；（注意：any类型在开发中能不用就尽量不要用）

//unknown
let a:unknown;
a='3'//ok
a=3;//ok
let b:string=a;//error:不能将类型“unknown”分配给类型“string”
let c:any=a;//ok

//any
let a:any;
a='3'//ok
a=3;//ok
let b:string=a;//ok

类型-元组

元组：长度和类型固定的数组就是元组

let arr:[string,number]=['1',2];
arr[0]=3;//error:不能将类型“number”分配给类型“string”
let arr2:[string,number]=['1'];//error:不能将类型“[string]”分配给类型“[string, number]”。源具有 1 个元素，但目标需要 2 个

类-继承实现

//类继承的实现:用到两个关键字(extends、super)
class Person{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name=name;
        this.age=age;
    }
    sayHello=function():void{
        console.log(`大家好，我叫${this.name},今年${this.age}岁了！`)
    };
}

class Female extends Person{
    constructor(name:string,age:number){
        super(name,age);//super作用：显示地调用父类的构造函数
    }
    //重写sayHello方法
    sayHello=function():void{
        console.log(`大家好，我是个小女孩，我叫${this.name},今年${this.age}岁了！`)
    };
}

let p=new Female("张三",22);
p.sayHello();

接口-只读属性

只读属性，顾名思义，属性是不可修改的

interface Point{
    readonly x:number,
    readonly y:number
}
let p:Point={x:20,y:30};
// p.x=50;//error:无法分配到 "x" ，因为它是只读属性

只读数组 ReadonlyArray<T>,需要特别注意的是，除了数组不能被修改之外，并且它不能直接赋值给其他普通数组对象。如果想要实现赋值，则需要使用类型断言。可以将as语法理解成java或C#中的强制类型转换

let readonlyArr:ReadonlyArray<string>=['1','2','3'];
let readonlyArr2:ReadonlyArray<string> =readonlyArr;//ok
let otherArr:Array<string> =readonlyArr;//error:类型 "readonly string[]" 为 "readonly"，不能分配给可变类型 "string[]"
let otherArr:Array<string> =readonlyArr as Array<string>;//使用类型断言

const和readonly：
二者定义的对象变量，属性是可以进行修改的，但是不能对对象进行重新赋值
最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。做为变量使用的话用 const，若做为属性则使用readonly

//const
const v1={x:1,y:2};
v1.x=4;//ok
v1={x:2,y:3};//error:无法分配到 "v1" ，因为它是常数
//readonly
interface Test{
    readonly obj:{x1:string,x2:string}
}
let t:Test={obj:{x1:'1',x2:'2'}};
t.obj.x1='3';//ok
t.obj={x1:'2',x2:'3'};//error:无法分配到 "obj" ，因为它是只读属性

接口-额外的属性检查

当传了一个包含定义之外的属性的时候，此时会报错

interface Params{
    x1:number,
    x2:number
}
function Sum(p:Params):number{
    return p.x1+p.x2;
}
Sum({x1:2,x2:3});//ok
Sum({x1:2,x2:3,x3:4});//error:类型“{ x1: number; x2: number; x3: number; }”的参数不能赋给类型“Params”的参数。对象文字可以只指定已知属性，并且“x3”不在类型“Params”中

//那么对于这种额外属性，这么绕过ts的类型检测呢？有两种解决办法
//第一种方法：中间变量
let tempObj={x1:2,x2:3,x3:4};//因为这里没有指定类型，所以不会进行类型检查
Sum(tempObj);//ok
//第二种方法：类型断言
Sum({x1:2,x2:3,x3:4} as Params)//ok

ts配置文件

tsconfig.json是一个JSON文件，添加配置文件后，只需只需 tsc 命令即可完成对整个项目的编译

配置选项：

include

定义希望被编译文件所在的目录
默认值：["**/*"]

示例：

  "include":["src/**/*", "tests/**/*"]

上述示例中，所有src目录和tests目录下的文件都会被编译

exclude

定义需要排除在外的目录
默认值：[“node_modules”, “bower_components”, “jspm_packages”]

示例：

  "exclude": ["./src/hello/**/*"]

上述示例中，src下hello目录下的文件都不会被编译

extends

定义被继承的配置文件

示例：

"extends": "./configs/base"

上述示例中，当前配置文件中会自动包含config目录下base.json中的所有配置信息

files

指定被编译文件的列表，只有需要编译的文件少时才会用到

示例：

"files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "tsc.ts"
  ]

列表中的文件都会被TS编译器所编译

compilerOptions

编译选项是配置文件中非常重要也比较复杂的配置选项
在compilerOptions中包含多个子选项，用来完成对编译的配置

项目选项：

target
- 设置ts代码编译的目标版本
- 可选值：
  - ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
- 示例：
  - ```
  "compilerOptions": {
      "target": "ES6"
  }
```
- 如上设置，我们所编写的ts代码将会被编译为ES6版本的js代码
lib
- 指定代码运行时所包含的库（宿主环境）
- 可选值：
  - ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost …
- 示例：
  - ```
  "compilerOptions": {
      "target": "ES6",
      "lib": ["ES6", "DOM"],
      "outDir": "dist",
      "outFile": "dist/aa.js"
  }
```
module
- 设置编译后代码使用的模块化系统
- 可选值：
  - CommonJS、UMD、AMD、System、ES2020、ESNext、None
- 示例：
  - ```
  "compilerOptions": {
      "module": "CommonJS"
  }
```
outDir
- 编译后文件的所在目录
- 默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置
- 示例：
  - ```
  "compilerOptions": {
      "outDir": "dist"
  }
```
- 设置后编译后的js文件将会生成到dist目录
outFile
- 将所有的文件编译为一个js文件
- 默认会将所有的编写在全局作用域中的代码合并为一个js文件，如果module制定了None、System或AMD则会将模块一起合并到文件之中
- 示例：
  - ```
  "compilerOptions": {
      "outFile": "dist/app.js"
  }
```
rootDir
- 指定代码的根目录，默认情况下编译后文件的目录结构会以最长的公共目录为根目录，通过rootDir可以手动指定根目录
- 示例：
  - ```
  "compilerOptions": {
      "rootDir": "./src"
  }
```
allowJs
- 是否对js文件编译

checkJs

是否对js文件进行检查

示例：

"compilerOptions": {
    "allowJs": true,
    "checkJs": true
}

removeComments
- 是否删除注释
- 默认值：false
noEmit
- 不对代码进行编译
- 默认值：false
sourceMap
- 是否生成sourceMap
- 默认值：false
严格检查
- strict
  - 启用所有的严格检查，默认值为true，设置后相当于开启了所有的严格检查
- alwaysStrict js严格模式
  - 总是以严格模式对代码进行编译
- noImplicitAny
  - 禁止隐式的any类型
- noImplicitThis
  - 禁止类型不明确的this
- strictBindCallApply
  - 严格检查bind、call和apply的参数列表
- strictFunctionTypes
  - 严格检查函数的类型
- strictNullChecks
  - 严格的空值检查
- strictPropertyInitialization
  - 严格检查属性是否初始化
额外检查
- noFallthroughCasesInSwitch
  - 检查switch语句包含正确的break
- noImplicitReturns
  - 检查函数没有隐式的返回值
- noUnusedLocals
  - 检查未使用的局部变量
- noUnusedParameters
  - 检查未使用的参数
高级
- allowUnreachableCode
  - 检查不可达代码
  - 可选值：
    - true，忽略不可达代码
    - false，不可达代码将引起错误
- noEmitOnError
  - 有错误的情况下不进行编译
  - 默认值：false