TypeScript语法进阶(上)

简介: TypeScript语法进阶

TypeScript中的配置文件(上)

初始化ts,在全局安装的ts之后使用tsc --init会创建tsconfig.json文件。这个文件实际上是对ts编译配置文件。真正对ts代码进行编译的时候,这个文件的内容会起作用。

运行tsc demo.ts等等类似命令的时候,直接指定编译某一文件的时候,它并不会使用tsconfig.json文件。只使用tsc才会使tsconfig.json文件。在tsconfig.json文件没有额外特别配置时,会默认将根目录下的ts文件统一进行编译。

指定特定的ts文件进行编译。

includefiles是包含要编译的文件,exclude指的是不编译的文件。

image.png

tsconfig.json 是什么

compilerOptions

指的是编译过程中的编译的一些属性,配置。

"removeComments": true,
/* Do not emit comments to output. */
 "noImplicitAny": true,         
/* Raise error on expressions and declarations withan implied 'any' type. */
 "strictNullChecks": true,   
/* Enable strict null checks. */

TypeScript中的配置文件(下)

ts-node这个工具会使用tsconfig.json进行编译。但是和tsc完全不是一个对象。

 "rootDir": "./",    
/* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
"outDir": "./build",      
/* Redirect output structure to the directory. */

"rootDir": "./", 指定输入文件的地址,和outDir一起用来控制输出。

 "incremental": true,      
/* Enable incremental compilation */

这个配置项打开,会产生一个文件,来保存上一次编译的信息,这次编译会和上一次编译作比对,已经编译过的内容就不再进行编译,没有进行编译过内容就进行编译。

image.png

 "allowJs": true,                    
/* Allow javascript files to be compiled. */
 "checkJs": true,                  
/* Report errors in .js files. */
  "target": "es5",         
/* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */

"allowJs": true,是否允许js文件也进行编译, "checkJs": true,允许对js进行语法检测, "target": "es5",编译后的js版本

"sourceMap": true,                 
/* Generates corresponding '.map' file. */

创建一个.map文件。


    "noUnusedLocals": true,        
/* Report errors on unused locals. */

定义未使用的变量会被报错。

image.png

    "noUnusedParameters": true,    
/* Report errors on unused parameters. */

针对函数的未使用而报错

image.png

联合类型和类型保护

image.png

image.png

类型保护

image.png

image.png

image.png

image.png

Enum枚举类型

const Status = {
  OFFLINE: 0,
  ONLINE: 1,
  DELETED: 2
}
function getResult(status) {
  if (status === Status.OFFLINE) {
    return 'offline';
  } else if (status === Status.ONLINE) {
    return 'online';
  } else if (status === Status.DELETED) {
    return 'deleted';
  }
  return 'error';
}
const result = getResult(1);
console.log(result);


enum Status {
  OFFLINE = 1,
  ONLINE,
  DELETED,
}
console.log(Status.OFFLINE, Status[0]); // 1,1

函数泛型

// 泛型 generic 泛指的类型
function join<T, P>(first: T, second: P) {
  return `${first}${second}`;
}
function anotherJoin<T>(first: T, second: T): T {
  return first;
}
// T[]
function map<T>(params: Array<T>) {
  return params;
}
// join<number, string>(1, '1');
// map<string>(['123']);
join(1, '1');

类中的泛型以及泛型类型

interface Item {
  name: string;
}
class DataManager<T extends Item> {
  constructor(private data: T[]) {}
  getItem(index: number): string {
    return this.data[index].name;
  }
}
const data = new DataManager([
  {
    name: 'dell'
  }
]);


class DataManager<T extends number | string> {
  constructor(private data: T[]) {}
  getItem(index: number): T {
    return this.data[index];
  }
}


// 如何使用泛型作为一个具体的类型注解
function hello<T>(params: T) {
  return params;
}
const func: <T>(param: T) => T = hello;

TypeScript语法进阶(下)https://developer.aliyun.com/article/1392236

目录
相关文章
|
6月前
|
XML JavaScript 前端开发
TypeScript 中的“as”语法是什么?
TypeScript 中的“as”语法是什么?
|
6月前
|
JavaScript 前端开发 开发者
深入理解ArkTS:Harmony OS 应用开发语言 TypeScript 的基础语法和关键特性
深入理解ArkTS:Harmony OS 应用开发语言 TypeScript 的基础语法和关键特性
614 0
|
29天前
|
JavaScript 前端开发 安全
TypeScript无缝衔接ArkTS:快速入门鸿蒙ArkTS基本语法
【10月更文挑战第12天】TypeScript无缝衔接ArkTS:快速入门鸿蒙ArkTS基本语法
82 0
TypeScript无缝衔接ArkTS:快速入门鸿蒙ArkTS基本语法
|
4月前
|
存储 JavaScript 开发者
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(四)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(四)
48 0
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(四)
|
4月前
|
JavaScript API 网络架构
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(三)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(三)
47 0
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(三)
|
4月前
|
JavaScript API
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(二)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(二)
40 0
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(二)
|
4月前
|
JavaScript 前端开发 索引
TypeScript(十)泛型进阶
TypeScript(十)泛型进阶
35 0
|
4月前
|
JavaScript API UED
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(五)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(五)
48 0
|
4月前
|
JavaScript 前端开发 API
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(一)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(一)
51 0
|
6月前
|
JavaScript 编译器 开发者
TypeScript中的“as”语法是什么?
TypeScript中的“as”语法是什么?
39 0