Typescript学习笔记1

UltraChicken
139 阅读6分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

说明

该笔记总结B站尚硅谷Typescript教程与《TypeScript 入门教程》,具体细节请查阅官方文档

前言

Vue3相比Vue2改变最大的除了将原有的Options API变为了现在的Composition API之外，就是现在的Vue3支持Typescript了，虽然Vue2也可以支持TS，但存在一些兼容性的问题，效果上肯定不如Vue3，况且vue本身就是拿TS写的，足以证明TS在如今前端发展中占据越来越重要的地位。此笔记动态记录并更新本人学习TS的过程，方便以后总结。

安装Typescript

TS与JS不同的是，TS是一门静态语言，它并不能像JS一样直接拿来运行，它需要编译以后再运行。这种感觉就有点像java与javac。那首先我们需要在全局下安装TS

npm i -g typescript

安装好以后可以在命令提示符窗口输入tsc -V查看是否安装成功。接下来需要安装node来运行js。

写一个“Hello Typescript”

function sayHello(person : string){
    return "Hello Typescript and " + person 
}
let person = "Ultrachicken"
console.log(sayHello(person))

可以通过 tsc + 这个文件的名称的方式进行编译，然后会生成一个js文件，将该文件放到控制台上运行即可，当然如果你也用的是VSCode，可以下载一款叫Code Runner的插件，下载完成以后直接右键你的TS代码点击Run Code直接执行。

数据类型

TS的数据类型基本上跟JS的一致，不过新增了一些数据类型

类型例子描述
number1,-33,2.5任意数字
string'hi',"hi"任意字符串
booleantrue、false布尔值true或者false
字面量及本身限制变量的值就是该字面量的值
any*任意类型
unknown*类型安全的any
void空值（undefined）没有值（undefined）
never没有值不能是任何值
object{name:"tony"}任意的JS对象
array[1,2,3]任意JS数组
tuple[4,5]元素，TS新增类型，固定长度的数组
enumenum{A,B}枚举，TS中新增类型

布尔值

let isDone : boolean = false

使用构造函数创建的对象不是布尔值

let createdByNewBoolean : boolean = new Boolean(1)
/* 
"不能将类型“Boolean”分配给类型“boolean”。
“boolean”是基元，但“Boolean”是包装器对象。如可能首选使用“boolean”。
*/

原因也很简单，就是定义的createdByNewBoolean是boolean类型，但是通过new Boolean(1)的实际上是一个对象

// 改成这样就好了
let createdByNewBoolean : Boolean = new Boolean(1)

或者直接调用 Boolean 也可以返回一个 boolean 类型：

let createdByNewBoolean : boolean = Boolean(1)

数字

let decLiteral: number = 6
let hexLiteral: number = 0xf00d
let binaryLiteral: number = 0b1010
let octalLiteral: number = 0o744
let notANumber: number = NaN
let infinityNumber: number = Infinity

字符串

let name : string = "bob"
name = "smith"
// 还可以使用模板字符串
let name2 : string = "Gene"
let age : number = 23
let sentence : string = "Hello,my name is ${ name }.

I'll be ${ age + 1 } years old next month."

数组

TS有两种定义数组的方式

let list : number[] = [1,2,3]
let list2 : Array<number> = [1,2,3]

元组（tuple）

元组用来表示一个已知元素数量和类型的数组，各元素的类型不必相同。

let x : [string,number]
// OK
x = ['hello',123]
// Error
x = [12,'hello']
// Error
x = ['hello']

枚举（enum）

使用枚举类型可以为一组数值赋予友好的名字

enum Color{Red,Green,Blue}
let c : Color = Color.Green

默认情况下，从0开始为元素编号，当然也可以自己手动指定成员的数值。

enum Color{Red=1,Green,Blue}
let c : Color = Color.Green

枚举类型可以让我们由枚举的值得到它的名字，例如我们知道数值为2，但具体是什么名字不知道，那就可以通过枚举方式映射2具体哪个为哪个名字:

enum Color{Red,Green,Blue}
// Blue
let c = Color[2]

Any

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量：

let x : any = 4
x = 56
x = 'hello'

一个变量设置类型为any后相当于该变量关闭了TS的类型检测，使用TS时，不建议使用any

Void

void类型与any正好相反，它表示没有任何类型，一般常用于函数中，表示函数没有返回值

Null 和 Undefined

默认情况下，null和undefined是所有类型的子类型

let u : undefined
let num : number = u

❗这部分官方文档说不会报错，但是我怎么试怎么错，意思就是number类型不能赋值undefined，null也如此。好像需要配置strictNullChecks。我推测这个默认是开启的，所以不允许你像上面那么去写代码，具体怎么关闭点击这个查看。👉TypeScript: TSConfig Option: strictNullChecks

Never

never类型表示的是那些永不存在的值的类型。 例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never类型，当它们被永不为真的类型保护所约束时。 never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使 any也不可以赋值给never。

// 返回never的函数必须存在无法达到的终点
function error(message:string):never{
    throw new Error(message)
}
// 推断的返回值类型为never
function fail(){
    return error("Something failed")
}
function infiniteLoop():never{
    while(true){

    }
}

Object

let a : {name:string}
a = {name : "bob"}
a = {name:"bob",age:13}         //Error

let b : {name:string,age:number}
a = {name:"bob",age:13}         

// 在属性名后边加上？，表示属性是可选的
let c : {name:string,age?:number}

// [propName:string]:any 表示任意类型的属性
let d : {name:string,[propName:string]:any}

// 设置函数结构的类型声明
// （形参：类型，形参：类型...）=>返回值
let e : (a:number,b:number)=>number

类型断言

类型断言有两种形式。 其一是“尖括号”语法：

let someValue : any = "this is a string"
let strLength : number = (<string>someValue).length

另一个as语法：

let someValue : any = "this is a string"
let strLength : number = (someValue as string).length

字面量

// 可以使用 | 来连接多个类型（联合类型）
let b : "male" | "female"
b = "male"
b = "female"

let c : boolean | string
c = true
c = "hello"

unknown

表示未知类型的值

let e : unknown
e = 10
e = "hello"
e = true

let s : string
e = "hello"
// Error
s = e
// unknown 实际上是一个类型安全的any
// unknown不能直接赋值给其他变量
// OK
if(typeof e === "string"){
    s=e
}
// 或者
// 类型断言，告诉解析器变量的实际类型
s = e as string
s = <string>e

类型的别名

type myType = 1|2|3|4
let k : myType
let m : myType

最后

ok第一天笔记就记这么多，主要总结一下TS的数据类型

avatar
文章
阅读
粉丝