TypeScript基本使用

TS基本使用

​ 这篇文档适合已经会JavaScript语言的，如果还没有学会JavaScript请先学习之后再来阅读。

基本类型

数据类型	关键字	描述
任意类型	any	任何类型接触到any类型都会关闭类型检查
未知类型	unknown	不会关闭语法检查的any类型
数字类型	number
字符串类型	string
布尔类型	boolean	表示逻辑值: true | false
数组类型	无	数组:[1,2,3,4]
元组类型	无	固定长度的数组
枚举	enum	用于定义数值集合
void	void	没有返回值，空
null	null	表示对象缺失
undefined	undefined	用于初始化变量未定义的值
never	never	其他类型包含 undefined和null

类型声明

// 语法
/*
*let 变量名:类型
*/
let num : number
let str : string
let boolean : boolean

类型别名

// 类型别名
type myType = 1 | 2 | 3 | 4 | 5
let num1:myType
let num2:myType
let num3:myType

类型断言

// 类型断言：unknown类型赋值时 自己知道值的类型告诉编译器
/*
* 语法:
* 1.未知变量 as 类型
* 2.<类型>未知变量
*/
let unknown1:unknown = 'hello'
let str:string
str = <string>unknown1

对象声明

/*
* 语法:
* let 变量名:{key:值类型,key:值类型...}
* let 变量名:{key:值类型,[key:key类型(string)]:值类型} 可以添加多个属性
*/
let obj1 : {
   name:string,age:number}
obj1 = {
   name:'张三',age:12}

let obj2 : {
   name:string,[propName:string]:any}
obj2 = {
   
    name:'张三',
    age:20,
    isNan:true,
}

函数声明

/*
* 语法：
* let 函数名:(形参:形参类型，形参:形参类型)=>返回值类型
*/
let fn1 : (a:number,b:number)=>number
let fn2 : (a:string,b:number)=>void
// 赋值
fn1 = function(n1:number,n2:number):number{
    return n1+n2
}
fn2 = function(n1:string,n2:number){}

数组声明

/*
* 语法：
* 1.let 数组名:Array<类型>
* 2.let 数组名:类型[]
*/
let strArray:string[]
strArray = ['asd','123']

let str2Array:Array<number>
str2Array=[1,2,3,4]

元组声明

/*
* 语法：
* let 元组名:[类型,类型,类型]
*/
let a : [string,number]
a = ['张三',123]

枚举

/*
* 语法：
* enum 集合名 {元素,元素}
*/
enum Sex1 {
   
  nan,
  nv
}
let i1: {
    name: string; sex: Sex }
i1 = {
   
  name: '张三',
  sex: Sex.nv
}
// Sex.nan 为 0 Sex.nv 为1

TS配置

创建tsconfig.json文件

// tsconfig.json
{
   
    "include":["./src/**/*"], // 指定编译的ts文件 **表示所有目录 *表示所有文件
	"exclude":["./src/hello/**/*"],// 指定不需要编译的ts文件
    "extends":"", //继承文件 合并到tsconfig.json 不经常用
    "files":["css.ts","xx.ts"], //指定编译的文件
    // compilerOptions配置项是编译器的配置
   	"compilerOptions":{
   
        "target":"es2015", //指定编译js的版本
        "module":"es2015", //指定js的模块化版本
        "lib":["DOM"], //指定项目用到的库 一般不需要修改
        "outDir":"./dist", //指定编译后js的存放位置
        "outFile":"./dist/app.js", //指定编译后的js文件合并为一个app.js
        "allowJs":true, //是否 编译js文件
        "checkJs":true, //是否 检查js代码符合语法规范
        "removeComments":true, // 是否 移除注释
        "noEmit":true, // 是否 生成编译后的文件
        "noEmitOnError":true, // 是否 生编译出现错误不生成js文件
        "alwayStrict":true, // 是否 使用严格模式
        "noImplicitAny":true, //是否 不允许出现隐式any类型
        "noImplicitThis":true, //是否 不允许出现隐式this<