TypeScript 终极初学者指南

在过去的几年里 Type 变得越来越流行，现在许多工作都要求开发人员了解 Type ，各大厂的大型项目基本都要求使用 Type 编写。

下面是我整理的一些初学者必备的一些知识点～

Type 简介

据官方描述： Type 是 Java 的超集，这意味着它可以完成 Java 所做的所有事情，而且额外附带了一些能力。

Java 本身是一种动态类型语言，这意味着变量可以改变类型。使用 Type 的主要原因是就是为了给 Java 添加静态类型。静态类型意味着变量的类型在程序中的任何时候都不能改变。它可以防止很多bug !

Type 值得学吗？

下面是学习 Type 的几个理由：

研究表明， Type 可以发现 15% 的常见 bug 。

Type 可以让代码的可读性更好，你可以更好的理解代码是在做什么。

Type 可以你申请到更多好工作。

学习 Type 可以使你对 Java 有更好的理解和新的视角。

研究表明， Type 可以发现 15% 的常见 bug 。

Type 可以让代码的可读性更好，你可以更好的理解代码是在做什么。

Type 可以你申请到更多好工作。

学习 Type 可以使你对 Java 有更好的理解和新的视角。

当然，使用 Type 也有一些缺点：

展开全文

Type 的编写时间比 Java 要长，因为你必须要指定类型，对于一些较小的独立项目，可能不值使用。

Type 需要编译，项目越大消耗时间越长。

Type 的编写时间比 Java 要长，因为你必须要指定类型，对于一些较小的独立项目，可能不值使用。

Type 需要编译，项目越大消耗时间越长。

但是，相比于提前发现更多的 bug，花更长的时间也是值得的。

Type 中的类型原始类型

在 Java 中，有 7 种原始类型：

string

number

bigint

boolean

undefined

null

symbol

string

number

bigint

boolean

undefined

null

symbol

原始类型都是不可变的，你可以为原始类型的变量重新分配一个新值，但不能像更改对象、数组和函数一样更改它的值。可以看下面的例子：

letname = 'ConardLi';

name.toLowerCase;

console.log(name); // ConardLi - 字符串的方法并没有改变字符串本身

letarr = [ 1, 3, 5, 7];

arr.pop;

console.log(arr); // [1, 3, 5] - 数组的方法改变了数组

回到 Type ，我们可以在声明一个变量之后设置我们想要添加的类型 :type (我们一般称之为“类型注释”或“类型签名”):

letid: number= 5;

letfirstname: string= 'ConardLi';

lethasDog: boolean= true;

letunit: number; // 声明变量而不赋值

unit = 5;

但是，如果变量有默认值的话，一般我们也不需要显式声明类型， Type 会自动推断变量的类型（类型推断）：

letid = 5; // number 类型

letfirstname = 'ConardLi'; // string 类型

lethasDog = true; // boolean 类型

hasDog = 'yes'; // ERROR

我们还可以将变量设置为联合类型（联合类型是可以分配多个类型的变量）：

letage: string| number;

age = 17;

age = '17';

Type 中的数组

在 Type 中，你可以定义数组包含的数据类型：

letids: number[] = [ 1, 2, 3, 4, 5]; // 只能包含 number

letnames: string[] = [ 'ConardLi', 'Tom', 'Jerry']; // 只能包含 string

letoptions: boolean[] = [ true, false, false]; 只能包含 truefalse

letbooks: object[] = [

{ name: 'Tom', animal: 'cat'},

{ name: 'Jerry', animal: 'mouse'},

]; // 只能包含对象

letarr: any[] = [ 'hello', 1, true]; // 啥都行，回到了 JS

ids.push( 6);

ids.push( '7'); // ERROR: Argument of type 'string' is not assignable to parameter of type 'number'.

你也可以使用联合类型来定义包含多种类型的数组：

letperson: ( string| number| boolean)[] = [ 'ConardLi', 1, true];

person[ 0] = 100;

person[ 1] = {name: 'ConardLi'} // Error - person array can't contain objects

如果数组有默认值， Type 同样也会进行类型推断：

letperson = [ 'ConardLi', 1, true]; // 和上面的例子一样

person[ 0] = 100;

person[ 1] = { name: 'ConardLi'}; // Error - person array can't contain objects

Type 中可以定义一种特殊类型的数组：元组（ Tuple ）。元组是具有固定大小和已知数据类型的数组，它比常规数组更严格。

letperson: [ string, number, boolean] = [ 'ConardLi', 1, true];

person[ 0] = 17; // Error - Value at index 0 can only be a string

Type 中的对象

Type 中的对象必须拥有所有正确的属性和值类型：

// 使用特定的对象类型注释声明一个名为 person 的变量

letperson: {

name: string;

age: number;

isProgrammer: boolean;

// 给 person 分配一个具有所有必要属性和值类型的对象

person = {

name: 'ConardLi',

age: 17,

isProgrammer: true,

person.age = '17'; // ERROR: should be a number

person = {

name: 'Tom',

age: 3,

// ERROR: missing the isProgrammer property

在定义对象的类型时，我们通常会使用 interface 。如果我们需要检查多个对象是否具有相同的特定属性和值类型时，是很有用的：

interfacePerson {

name: string;

age: number;

isProgrammer: boolean;

letperson1: Person = {

name: 'ConardLi',

age: 17,

isProgrammer: true,

letperson2: Person = {

name: 'Tom',

age: 3,

isProgrammer: false,

我们还可以用函数的类型签名声明一个函数属性，通用函数( sayHi )和箭头函数( sayBye )都可以声明：

interfaceAnimal {

eat(name: string): string;

speak: ( name: string) => string;

lettom: Animal = {

eat: function( name: string) {

return`eat ${name}` ;

speak: ( name: string) => `speak ${name}` ,

console.log(tom.eat( 'Jerry'));

console.log(tom.speak( '哈哈哈'));

需要注意的是，虽然 eat、speak 分别是用普通函数和箭头函数声明的，但是它们具体是什么样的函数类型都可以， Type 是不关心这些的。

Type 中的函数

我们可以定义函数参数和返回值的类型：

// 定义一个名为 circle 的函数，它接受一个类型为 number 的直径变量，并返回一个字符串

functioncircle( diam: number): string{

return'圆的周长为：'+ Math.PI * diam;

console.log(circle( 10)); // 圆的周长为：31.41592653589793

ES6 箭头函数的写法：

constcircle = (diam: number): string=> {

return'圆的周长为：'+ Math.PI * diam;

我们没必要明确声明 circle 是一个函数， Type 会进行类型推断。 Type 还会推断函数的返回类型，但是如果函数体比较复杂，还是建议清晰的显式声明返回类型。

我们可以在参数后添加一个?，表示它为可选参数；另外参数的类型也可以是一个联合类型：

constadd = ( a: number, b: number, c?: number| string) => {

console.log(c);

returna + b;

console.log(add( 5, 4, '可以是 number、string，也可以为空'));

如果函数没有返回值，在 TS 里表示为返回 void ，你也不需要显式声明， TS 一样可以进行类型推断：

constlog = (msg: string): void=> {

console.log( '打印一些内容: '+ msg);

any 类型

使 any 类型，我们基本上可以将 Type 恢复为 Java ：

letname: any= 'ConardLi';

name = 17;

name = { age: 17};

如果代码里使用了大量的 any ，那 Type 也就失去了意义，所以我们应该尽量避免使用 any 。

DOM 和类型转换

Type 没办法像 Java 那样访问 DOM 。这意味着每当我们尝试访问 DOM 元素时， Type 都无法确定它们是否真的存在。

constlink = document.querySelector( 'a');

console.log(link.href); // ERROR: Object is possibly 'null'. Type can't be sure the anchor tag exists, as it can't access the DOM

使用非空断言运算符 ( ! )，我们可以明确地告诉编译器一个表达式的值不是 null 或 undefined 。当编译器无法准确地进行类型推断时，这可能很有用：

// 我们明确告诉 TS a 标签肯定存在

constlink = document.querySelector( 'a')!;

console.log(link.href); // conardli.top

这里我们没必要声明 link 变量的类型。这是因为 Type 可以通过类型推断确认它的类型为 HTMLAnchorElement 。

但是如果我们需要通过 class 或 id 来选择一个 DOM 元素呢？这时 Type 就没办法推断类型了：

constform = document.getElementById( 'signup-form');

console.log(form.method);

// ERROR: Object is possibly 'null'.

// ERROR: Property 'method' does not exist on type 'HTMLElement'.

我们需要告诉 Type form 确定是存在的，并且我们知道它的类型是 HTMLFormElement 。我们可以通过类型转换来做到这一点：

constform = document.getElementById( 'signup-form') asHTMLFormElement;

console.log(form.method); // post

Type 还内置了一个 Event 对象。如果我们在表单中添加一个 submit 的事件侦听器， Type 可以自动帮我们推断类型错误：

constform = document.getElementById( 'signup-form') asHTMLFormElement;

form.addEventListener( 'submit', ( e: Event) => {

e.preventDefault; // 阻止页面刷新

console.log(e.tarrget); // ERROR: Property 'tarrget' does not exist on type 'Event'. Did you mean 'target'?

Type 中的类

我们可以定义类中每条数据的类型：

classPerson {

name: string;

isCool: boolean;

age: number;

constructor( n: string, c: boolean, a: number) {

this.name = n;

this.isCool = c;

this.age = a;

sayHello {

return`Hi，我是 ${ this.name} ，我今年 ${ this.age} 岁了` ;

constperson1 = newPerson( 'ConardLi', true, 17);

constperson2 = newPerson( 'Jerry', 'yes', 20); // ERROR: Argument of type 'string' is not assignable to parameter of type 'boolean'.

console.log(person1.sayHello); // Hi, 我是 ConardLi，我今年 17 岁了

我们可以创建一个仅包含从 Person 构造的对象数组：

letPeople: Person[] = [person1, person2];

我们可以给类的属性添加访问修饰符， Type 还提供了一个新的 readonly 访问修饰符。

classPerson {

readonly name: string; // 不可以变的

privateisCool: boolean; // 类的私有属性、外部访问不到

protectedemail: string; // 只能从这个类和子类中进行访问和修改

publicage: number; // 任何地方都可以访问和修改

constructor( n: string, c: boolean, a: number) {

this.name = n;

this.isCool = c;

this.age = a;

sayHello {

return`Hi，我是 ${ this.name} ，我今年 ${ this.age} 岁了` ;

constperson1 = newPerson( 'ConardLi', true, 'conard@xx.com', 17);

console.log(person1.name); // ConardLi

person1.name = 'Jerry'; // Error: read only

我们可以通过下面的写法，属性会在构造函数中自动分配，我们类会更加简洁：

classPerson {

constructor(

readonly name: string,

privateisCool: boolean,

protectedemail: string,

publicage: number

如果我们省略访问修饰符，默认情况下属性都是 public ，另外和 Java 一样，类也是可以 extends 的。

如果我们省略访问修饰符，默认情况下属性都是 public ，另外和 Java 一样，类也是可以 extends 的。

接口定义了对象的外观：

interfacePerson {

name: string;

age: number;

functionsayHi( person: Person) {

console.log( `Hi ${person.name}` );

sayHi({

name: 'ConardLi',

age: 17,

}); // Hi ConardLi

你还可以使用类型别名定义对象类型：

typePerson = {

name: string;

age: number;

或者可以直接匿名定义对象类型：

functionsayHi( person: { name: string; age: number} ) {

console.log( `Hi ${person.name}` );

interface 和 type 非常相似，很多情况下它俩可以随便用。比如它们两个都可以扩展：

扩展 interface ：

interfaceAnimal {

name: string

interfaceBear extendsAnimal {

honey: boolean

constbear: Bear = {

name: "Winnie",

honey: true,

扩展 type ：

typeAnimal = {

name: string

typeBear = Animal & {

honey: boolean

constbear: Bear = {

name: "Winnie",

honey: true,

但是有个比较明显的区别， interface 是可以自动合并类型的，但是 type 不支持：

interfaceAnimal {

name: string

interfaceAnimal {

tail: boolean

constdog: Animal = {

name: "Tom",

tail: true,

类型别名在创建后无法更改：

typeAnimal = {

name: string

typeAnimal = {

tail: boolean

// ERROR: Duplicate identifier 'Animal'.

一般来说，当你不知道用啥的时候，默认就用 interface 就行，直到 interface 满足不了我们的需求的时候再用 type 。

类的 interface

我们可以通过实现一个接口来告诉一个类它必须包含某些属性和方法：

interfaceHasFormatter {

format: string;

classPerson implementsHasFormatter {

constructor( publicusername: string, protectedpassword: string) {}

format {

returnthis.username.toLocaleLowerCase;

letperson1: HasFormatter;

letperson2: HasFormatter;

person1 = newPerson( 'ConardLi', 'admin123');

person2 = newPerson( 'Tom', 'admin123');

console.log(person1.format); // conardli

确保 people 是一个实现 HasFormatter 的对象数组(确保每 people 都有 format 方法):

letpeople: HasFormatter[] = [];

people.push(person1);

people.push(person2);

泛型

泛型可以让我们创建一个可以在多种类型上工作的组件，它能够支持当前的数据类型，同时也能支持未来的数据类型，这大大提升了组件的可重用性。我们来看下面这个例子：

addID 函数接受一个任意对象，并返回一个新对象，其中包含传入对象的所有属性和值，以及一个 0 到 1000 之间随机的 id 属性。

constaddID = ( obj: object) => {

letid = Math.floor( Math.random * 1000);

return{ ...obj, id };

letperson1 = addID({ name: 'John', age: 40});

console.log(person1.id); // 271

console.log(person1.name); // ERROR: Property 'name' does not exist on type '{ id: number; }'.

当我们尝试访问 name 属性时， Type 会出错。这是因为当我们将一个对象传递给 addID 时，我们并没有指定这个对象应该有什么属性 —— 所以 Type 不知道这个对象有什么属性。因此， Type 知道的唯一属性返回对象的 id 。

那么，我们怎么将任意对象传递给 addID ，而且仍然可以告诉 Type 该对象具有哪些属性和值？这种场景就可以使用泛型了, <T> – T 被称为类型参数：

// <T> 只是一种编写习惯 - 我们也可以用 <X> 或 <A>

constaddID = <T> ( obj: T) => {

letid = Math.floor( Math.random * 1000);

return{ ...obj, id };

这是啥意思呢？现在当我们再将一个对象传递给 addID 时，我们已经告诉 Type 来捕获它的类型了 —— 所以 T 就变成了我们传入的任何类型。 addID 现在会知道我们传入的对象上有哪些属性。

但是，现在有另一个问题：任何东西都可以传入 addID ， Type 将捕获类型而且并不会报告问题：

letperson1 = addID({ name: 'ConardLi', age: 17});

letperson2 = addID( 'Jerry'); // 传递字符串也没问题

console.log(person1.id); // 188

console.log(person1.name); // ConardLi

console.log(person2.id);

console.log(person2.name); // ERROR: Property 'name' does not exist on type '"Jerry" & { id: number; }'.

当我们传入一个字符串时， Type 没有发现任何问题。只有我们尝试访问 name 属性时才会报告错误。所以，我们需要一个约束：我们需要通过将泛型类型 T 作为 object 的扩展，来告诉 Type 只能接受对象:

constaddID = <T extendsobject> ( obj: T) => {

letid = Math.floor( Math.random * 1000);

return{ ...obj, id };

letperson1 = addID({ name: 'John', age: 40});

letperson2 = addID( 'Jerry'); // ERROR: Argument of type 'string' is not assignable to parameter of type 'object'.

错误马上就被捕获了，完美…… 好吧，也不完全是。在 Java 中，数组也是对象，所以我们仍然可以通过传入数组来逃避类型检查：

letperson2 = addID([ 'ConardLi', 17]); // 传递数组没问题

console.log(person2.id); // 188

console.log(person2.name); // Error: Property 'name' does not exist on type '(string | number)[] & { id: number; }'.

要解决这个问题，我们可以这样说： object 参数应该有一个带有字符串值的 name 属性：

constaddID = <T extends{ name: string}> ( obj: T) => {

letid = Math.floor( Math.random * 1000);

return{ ...obj, id };

letperson2 = addID([ 'ConardLi', 17]); // ERROR: argument should have a name property with string value

泛型允许在参数和返回类型提前未知的组件中具有类型安全。

在 Type 中，泛型用于描述两个值之间的对应关系。在上面的例子中，返回类型与输入类型有关。我们用一个泛型来描述对应关系。

另一个例子：如果需要接受多个类型的函数，最好使用泛型而不是 any 。下面展示了使用 any 的问题：

functionlogLength( a: any) {

console.log(a.length); // No error

returna;

lethello = 'Hello world';

logLength(hello); // 11

lethowMany = 8;

logLength(howMany); // undefined (but no Type error - surely we want Type to tell us we've tried to access a length property on a number!)

我们可以尝试使用泛型：

functionlogLength< T>( a: T) {

console.log(a.length); // ERROR: Type isn't certain that `a` is a value with a length property

returna;

好，至少我们现在得到了一些反馈，可以帮助我们持续改进我们的代码。

解决方案：使用一个泛型来扩展一个接口，确保传入的每个参数都有一个 length 属性：

interfacehasLength {

length: number;

functionlogLength< TextendshasLength>( a: T) {

console.log(a.length);

returna;

lethello = 'Hello world';

logLength(hello); // 11

lethowMany = 8;

logLength(howMany); // Error: numbers don't have length properties

我们也可以编写这样一个函数，它的参数是一个元素数组，这些元素都有一个 length 属性：

interfacehasLength {

length: number;

functionlogLengths< TextendshasLength>( a: T[]) {

a.forEach( ( element) => {

console.log(element.length);

letarr = [

'This string has a length prop',

[ 'This', 'arr', 'has', 'length'],

{ material: 'plastic', length: 17},

logLengths(arr);

// 29

// 4

// 30

泛型是 Type 的一个很棒的特性！

泛型接口

当我们不知道对象中的某个值是什么类型时，可以使用泛型来传递该类型：

// The type, T, will be passed in

interfacePerson<T> {

name: string;

age: number;

documents: T;

// We have to pass in the type of `documents` - an array of strings in this case

constperson1: Person< string[]> = {

name: 'ConardLi',

age: 17,

documents: [ 'passport', 'bank statement', 'visa'],

// Again, we implement the `Person` interface, and pass in the type for documents - in this case a string

constperson2: Person< string> = {

name: 'Tom',

age: 20,

documents: 'passport, P45',

枚举

枚举是 Type 给 Java 带来的一个特殊特性。枚举允许我们定义或声明一组相关值，可以是数字或字符串，作为一组命名常量。

enumResourceType {

BOOK,

AUTHOR,

FILM,

DIRECTOR,

PERSON,

console.log(ResourceType.BOOK); // 0

console.log(ResourceType.AUTHOR); // 1

// 从 1 开始

enumResourceType {

BOOK = 1,

AUTHOR,

FILM,

DIRECTOR,

PERSON,

console.log(ResourceType.BOOK); // 1

console.log(ResourceType.AUTHOR); // 2

默认情况下，枚举是基于数字的 — 它们将字符串值存储为数字。但它们也可以是字符串：

enumDirection {

Up = 'Up',

Right = 'Right',

Down = 'Down',

Left = 'Left',

console.log(Direction.Right); // Right

console.log(Direction.Down); // Down

当我们有一组相关的常量时，枚举就可以派上用场了。例如，与在代码中使用非描述性数字不同，枚举通过描述性常量使代码更具可读性。

枚举还可以防止错误，因为当你输入枚举的名称时，智能提示将弹出可能选择的选项列表。

Type 严格模式

建议在 tsconfig.json 中启用所有严格的类型检查操作文件。这可能会导致 Type 报告更多的错误，但也更有助于帮你提前发现发现程序中更多的 bug 。

// tsconfig.json

"strict": true

严格模式实际上就意味着：禁止隐式 any 和 严格的空检查。

严格模式实际上就意味着：禁止隐式 any 和 严格的空检查。

在下面的函数中， Type 已经推断出参数 a 是 any 类型的。当我们向该函数传递一个数字，并尝试打印一个 name 属性时，没有报错：

functionlogName( a) {

// No error??

console.log(a.name);

logName( 97);

打开 noImplicitAny 选项后，如果我们没有显式地声明 a 的类型， Type 将立即标记一个错误：

// ERROR: Parameter 'a' implicitly has an 'any' type.

functionlogName( a) {

console.log(a.name);

严格的空检查

当 strictNullChecks 选项为 false 时， Type 实际上会忽略 null 和 undefined 。这可能会在运行时导致意外错误。

当 strictNullChecks 设置为 true 时， null 和 undefined 有它们自己的类型，如果你将它们分配给一个期望具体值(例如，字符串)的变量，则会得到一个类型错误。

letwhoSangThis: string= getSong;

constsingles = [

{ song: 'touch of grey', artist: 'grateful dead'},

{ song: 'paint it black', artist: 'rolling stones'},

constsingle = singles.find( ( s) => s.song === whoSangThis);

console.log(single.artist);

singles.find 并不能保证它一定能找到这首歌 — 但是我们已经编写了下面的代码，好像它肯定能找到一样。

通过将 strictNullChecks 设置为 true ， Type 将抛出一个错误，因为在尝试使用它之前，我们没有保证 single 一定存在：

constgetSong = => {

return'song';

letwhoSangThis: string= getSong;

constsingles = [

{ song: 'touch of grey', artist: 'grateful dead'},

{ song: 'paint it black', artist: 'rolling stones'},

constsingle = singles.find( ( s) => s.song === whoSangThis);

console.log(single.artist); // ERROR: Object is possibly 'undefined'.

Type 基本上是告诉我们在使用 single 之前要确保它存在。我们需要先检查它是否为 null 或 undefined ：

if(single) {

console.log(single.artist); // rolling stones

Type 中的类型收窄

在 Type 中，变量可以从不太精确的类型转移到更精确的类型，这个过程称为类型收窄。

下面是一个简单的例子，展示了当我们使用带有 typeof 的 if 语句时， Type 如何将不太特定的 string | number 缩小到更特定的类型：

functionaddAnother( val: string| number) {

if( typeofval === 'string') {

// ts 将 val 视为一个字符串

returnval.concat( ' '+ val);

// ts 知道 val 在这里是一个数字

returnval + val;

console.log(addAnother( '哈哈')); // 哈哈 哈哈

console.log(addAnother( 17)); // 34

另一个例子：下面，我们定义了一个名为 allVehicles 的联合类型，它可以是 Plane 或 Train 类型。

interfaceVehicle {

topSpeed: number;

interfaceTrain extendsVehicle {

carriages: number;

interfacePlane extendsVehicle {

wingSpan: number;

typePlaneOrTrain = Plane | Train;

functiongetSpeedRatio( v: PlaneOrTrain) {

console.log(v.carriages); // ERROR: 'carriages' doesn't exist on type 'Plane'

由于 getSpeedRatio 函数处理了多种类型，我们需要一种方法来区分 v 是 Plane 还是 Train 。我们可以通过给这两种类型一个共同的区别属性来做到这一点，它带有一个字符串值:

interfaceTrain extendsVehicle {

type: 'Train';

carriages: number;

interfacePlane extendsVehicle {

type: 'Plane';

wingSpan: number;

typePlaneOrTrain = Plane | Train;

现在， Type 可以缩小 v 的类型:

functiongetSpeedRatio( v: PlaneOrTrain) {

if(v.type === 'Train') {

returnv.topSpeed / v.carriages;

// 如果不是 Train，ts 知道它就是 Plane 了，聪明！

returnv.topSpeed / v.wingSpan;

letbigTrain: Train = {

type: 'Train',

topSpeed: 100,

carriages: 20,

console.log(getSpeedRatio(bigTrain)); // 5Type & React

Type 完全支持 React 和 JSX。这意味着我们可以将 Type 与三个最常见的 React 框架一起使用：

create-react-app (/)

Gatsby (/)

Next.js ()

create-react-app (/)

Gatsby (/)

Next.js ()

如果你需要一个更自定义的 React-Type 配置，你可以字节配置 Webpack 和 tsconfig.json 。但是大多数情况下，一个框架就可以完成这项工作。

例如，要用 Type 设置 create-react-app ，只需运行:

npx create-react-app my-app --template type

# or

yarn create react-app my-app --template type

在 src 文件夹中，我们现在可以创建带有 .ts (普通 Type 文件)或 .tsx (带有 React 的 Type 文件)扩展名的文件，并使用 Type 编写我们的组件。然后将其编译成 public 文件夹中的 Java 。

React props & Type

Person 是一个 React 组件，它接受一个 props 对象，其中 name 应该是一个字符串， age 是一个数字。

// src/components/Person.tsx

importReact from'react';

constPerson: React.FC<{

name: string;

age: number;

}> = ( { name, age }) => {

return(

<div>

<div>{name}< /div>

<div>{age}</ div>

< /div>

export default Person;

一般我们更喜欢用 interface 定义 props ：

interfaceProps {

name: string;

age: number;

constPerson: React.FC<Props> = ( { name, age }) => {

return(

<div>

<div>{name}< /div>

<div>{age}</ div>

< /div>

然后我们尝试将组件导入到 App.tsx ，如果我们没有提供必要的 props ， Type 会报错。

importReact from'react';

importPerson from'./components/Person';

constApp: React.FC = => {

return(

<div>

<Person name= 'ConardLi'age={ 17} />

< /div>

export default App;

React hooks & TypeuseState

我们可以用尖括号来声明状态变量的类型。如果我们省略了尖括号， Type 会默认推断 cash 是一个数字。因此，如果想让它也为空，我们必须指定：

constPerson: React.FC<Props> = ( { name, age }) => {

const[cash, setCash] = useState< number| null>( 1);

setCash( null);

return(

<div>

<div>{name}< /div>

<div>{age}</ div>

< /div>

useRef

useRef 返回一个可变对象，该对象在组件的生命周期内都是持久的。我们可以告诉 Type ref 对象应该指向什么：

constPerson: React.FC = => {

// Initialise .current property to null

constinputRef = useRef<HTMLInputElement>( null);

return(

<div>

<input type= 'text'ref={inputRef} />

< /div>

参考

/

/

/

/

好了，这篇文章我们学习了一些 Type 的必备基础，有了这些知识你已经可以应付大部分 TS 的应用场景了。

- EOF -

点击标题可跳转

1、 完成第一个 Vue3.2 项目后，这是我的技术总结

2、 Type 遭库开发者嫌弃：类型简直是万恶之源

3、 我们用了一个周末，将 370 万行代码迁移到了 Type

↓推荐关注↓

「大前端技术之路」分享 Web前端，Node.js、React Native等大前端技术栈精选

点赞和在看就是最大的支持❤️