-
ts入门笔记——ts类型声明和类型断言
2020-09-28 11:38:35ts入门笔记——ts类型声明和类型断言 学习路径 1.学习ts声明变量类型 2.学习ts的类型断言(解释型类型转换) 3.学习ts的接口进一步详解 ts在线运行练习网站:https://www.tslang.cn/play/index.html 一、ts简介 1....最近玩csdn比较少,欢迎关注我的掘金:杨灿就是杨火山
简单快速上手ts的学习路径:
一、熟悉掌握熟悉的强类型定义,初步学习编写强类型代码。
- 学习ts的声明变量类型,能够初步编写强类型代码;
- 学习ts的接口,进一步强定义对象的丰富属性;
- 学习ts的函数声明和实现定义,强类型化你的js函数;
二、灵活面对类型转换,类型报错,类型文件的声明和引入,灵活编写强类型代码。
- 学习ts的类型断言(解释型类型转换);
- 学习ts的泛型,更灵活的面对多可能性类型参数;
- 学习ts的类型声明文件,全局定义;
ts在线运行练习网站:https://www.tslang.cn/play/index.html
一、ts简介
1.什么是TypeScript(TS)?
TypeScript简称TS
TS和JS之间的关系其实就是Less/Sass和CSS之间的关系
就像Less/Sass是对CSS进行扩展一样, TS也是对JS进行扩展
就像Less/Sass最终会转换成CSS一样, 我们编写好的TS代码最终也会换成JS2.为什么需要TypeScript?
因为JavaScript是弱类型, 很多错误只有在运行时才会被发现
而TypeScript是强类型, 它提供了一套静态检测机制,如何我们编码事中途变换变量的类型,ts就会在报错,帮助我们在编码时发现错误。Ts为帮助js弥补在大型项目中的缺陷而生。
3.TypeScript特点
- 支持最新的JavaScript新特特性
- 支持代码静态检查
- 支持诸如C,C++,Java,Go等后端语言中的特性
(枚举、泛型、类型转换、命名空间、声明文件、类、接口等)
二、ts中的类型声明
TypeScript支持与JavaScript几乎相同的数据类型,此外还提供了实用的枚举类型、元祖方便我们使用
1.boolean、number、string简单类型的变量声明
布尔类型 boolean
let val2:boolean; val2 = true; // val2 = 1; // 会报错 console.log(val2);
数值类型 number
let val1:number; // 定义了一个名称叫做val1的变量, 这个变量中将来只能存储数值类型的数据 val1 = 123; // val1 = "123"; // 会报错 // 注意点: 其它的用法和JS一样 // val1 = 0x11; // val1 = 0o11; // val1 = 0b11; console.log(val1);
字符串类型 string
let val3:string; val3 = "123"; val3 = `val1=${val1}, val2==${val2}`; console.log(val3);
2.数组和元祖类型的变量声明
(1)整个数组数据类型一致的情况
方式一: Array < number >
// 需求: 要求定义一个数组, 这个数组中将来只能存储数值类型的数据 let arr1:Array<number>; // 表示定义了一个名称叫做arr1的数组, 这个数组中将来只能够存储数值类型的数据 arr1 = [1, 3, 5]; // arr1 = ['a', 3, 5]; // 报错 console.log(arr1);
方式二: string[ ] (建议)
// 需求: 要求定义一个数组, 这个数组中将来只能存储字符串类型的数据 let arr2:string[]; // 表示定义了一个名称叫做arr2的数组, 这个数组中将来只能够存储字符串类型的数据 arr2 = ['a', 'b', 'c']; // arr2 = [1, 'b', 'c']; // 报错 console.log(arr2);
(2)整个数组数据类型不一致的情况
联合类型声明数组 (number | string)[ ]
let arr3:(number | string)[]; // 表示定义了一个名称叫做arr3的数组, 这个数组中将来既可以存储数值类型的数据, 也可以存储字符串类型的数据 arr3 = [1, 'b', 2, 'c']; // arr3 = [1, 'b', 2, 'c', false]; // 报错 console.log(arr3);
(3) 自由任意类型元素的数组
any[ ]
let arr4:any[]; // 表示定义了一个名称叫做arr4的数组, 这个数组中将来可以存储任意类型的数据 arr4 = [1, 'b', false]; console.log(arr4);
(4) 严格限制类型和长度的元祖数组
元祖类型 [string, number, boolean]
TS中的元祖类型其实就是数组类型的扩展,元祖用于保存定长定数据类型的数据
let arr5:[string, number, boolean]; // 表示定义了一个名称叫做arr5的元祖, 这个元祖中将来可以存储3个元素, 第一个元素必须是字符串类型, 第二个元素必须是数字类型, 第三个元素必须是布尔类型 arr5 = ['a', 1, true]; // arr5 = ['a', 1, true, false]; // 超过指定的长度会报错 arr5 = ['a', 1, true]; console.log(arr5);
3.enum枚举类型
枚举用于表示固定的几个取值,例如: 一年只有四季、人的性别只能是男或者女。
枚举类型是TS为JS扩展的一种类型, 在原生的JS中是没有枚举类型的。定义:
enum Gender{ Male=0, Femal=1 } // 简写 enum Gender{ Male, Femal } // 定义了一个名称叫做Gender的枚举类型, 这个枚举类型的取值有两个, 分别是Male和Femal
使用:
let val:Gender; // 定义了一个名称叫做val的变量, 这个变量中只能保存Male或者Femal val = Gender.Male; val = Gender.Femal; // val = 'nan'; // 报错 // val = false;// 报错 // 注意点: TS中的枚举底层实现的本质其实就是数值类型, 所以赋值一个数值不会报错 // val = 666; // 不会报错 // console.log(Gender.Male); // 0 // console.log(Gender.Femal);// 1 // 注意点: TS中的枚举类型的取值, 默认是从上至下从0开始递增的 // 虽然默认是从0开始递增的, 但是我们也可以手动的指定枚举的取值的值 // 注意点: 如果手动指定了前面枚举值的取值, 那么后面枚举值的取值会根据前面的值来递增 // console.log(Gender.Male); // 6 // console.log(Gender.Femal);// 7 // 注意点: 如果手动指定了后面枚举值的取值, 那么前面枚举值的取值不会受到影响 // console.log(Gender.Male); // 0 // console.log(Gender.Femal);// 6 // 注意点: 我们还可以同时修改多个枚举值的取值, 如果同时修改了多个, 那么修改的是什么最后就是什么 // console.log(Gender.Male); // 8 // console.log(Gender.Femal);// 6
// 我们可以通过枚举值拿到它对应的数据 console.log(Gender.Male); // 0 // 我们还可以通过它对应的数据拿到它的枚举值 console.log(Gender[0]); // Male
探究底层实现原理
var Gender; (function (Gender) { // Gender[key] = value; Gender[Gender["Male"] = 0] = "Male"; Gender[Gender["Femal"] = 1] = "Femal"; })(Gender || (Gender = {})); // Gender[Gender["Male"] = 0] = "Male" 相当于 Gender["Male"] = 0;Gender[0] = "Male"; let Gender = {}; Gender["Male"] = 0; Gender[0] = "Male"; Gender["Femal"] = 1; Gender[1] = "Femal";
4.any 任意类型
any表示任意类型, 当我们不清楚某个值的具体类型的时候我们就可以使用any,任何数据类型的值都可以赋值给any类型
一般用于定义一些通用性比较强的变量, 或者用于保存从其它框架中获取的不确定类型的值
注意不要过多使用any,因为什么都是any那ts就变成js了
let value:any; // 定义了一个可以保存任意类型数据的变量 value = 123; value = "abc"; value = true; value = [1, 3, 5];
5.void类型
void与any正好相反, 表示没有任何类型, 一般用于函数返回值。在TS中只有null和undefined可以赋值给void类型
function test():void { console.log("hello world"); } test(); let value:void; // 定义了一个不可以保存任意类型数据的变量, 只能保存null和undefined // value = 123; // 报错 // value = "abc";// 报错 // value = true;// 报错 // 注意点: null和undefined是所有类型的子类型, 所以我们可以将null和undefined赋值给任意类型 // value = null; // 不会报错 value = undefined;// 不会报错
6.never类型
表示的是那些永不存在的值的类型,一般用于抛出异常或根本不可能有返回值的函数。
// function demo():never { // throw new Error('报错了'); // } // demo(); // function demo2():never { // while (true){} // } // demo2();
7.Object对象类型
let obj:object; // 定义了一个只能保存对象的变量 // obj = 1; // obj = "123"; // obj = true; obj = {name:'lnj', age:33}; console.log(obj);
如何表示一个具体的对象数据结构呢?
答案:可以使用ts的接口,在后续文章中会详细介绍。8. 接口interface类型
(1)什么是接口类型?
和number,string,boolean,enum这些数据类型一样,接口也是一种类型, 也是用来约束使用者的。
(2)定义和使用
// 需求: 要求定义一个函数输出一个人完整的姓名, 这个人的姓必须是字符串, 这个人的名也必须是一个字符 interface FullName{ firstName:string lastName:string } let obj = { firstName:'Jonathan', lastName:'Lee' // lastName:18 会报错 }; //{firstName, lastName}使用了解构赋值 function say({firstName, lastName}:FullName):void { console.log(`我的姓名是:${firstName}_${lastName}`); } say(obj);
ts入门笔记目录:
记录知识,传递快乐~
如果我的总结对你有帮助,请给我点个赞,你的鼓励是我持续记录的一大动力~
如果文章中有错误,请多包涵,欢迎在评论中指出~
-
ts类型声明文件的正确使用姿势
2020-01-17 08:31:47ts类型声明文件的正确使用姿势 ts声明文件类型 DefinitelyTyped社区已定义 npm install @types/jquery --save-dev 与npm一同发布 解释: package.json 中有 types 字段,或者有一个 index.d.ts 声明文件 自给自足...ts类型声明文件的正确使用姿势
ts声明文件类型
DefinitelyTyped社区已定义
npm install @types/jquery --save-dev
与npm一同发布
解释: package.json 中有 types 字段,或者有一个 index.d.ts 声明文件
自给自足型
- 创建一个 node_modules/@types/foo/index.d.ts 文件,存放 foo 模块的声明文件。不太建议用这种方案,一般只用作临时测试。
- 创建一个 types 目录,专门用来管理自己写的声明文件,将 foo 的声明文件放到 types/foo/index.d.ts 中。这种方式需要配置下 tsconfig.json 中的 paths 和 baseUrl 字段。
/path/to/project ├── src | └── index.ts ├── types | └── foo | └── index.d.ts └── tsconfig.json
{ "compilerOptions": { "module": "commonjs", "baseUrl": "./", "paths": { "*": ["types/*"] } } }
ts声明文件书写姿势
全局型
# let declare let jQuery: (selector: string) => any; # function declare function jQuery(selector: string): any; #class declare class Animal { name: string; constructor(name: string); sayHi(): string; } #enum declare enum Directions { Up, Down, Left, Right } #namespace declare namespace jQuery { function ajax(url: string, settings?: any): void; namespace fn { function extend(object: any): void; } }
npm包型 - export
// types/foo/index.d.ts export const name: string; export function getName(): string; export class Animal { constructor(name: string); sayHi(): string; } export enum Directions { Up, Down, Left, Right } export interface Options { data: any; } export namespace foo { const name: string; namespace bar { function baz(): string; } }
npm包型 - export default
// types/foo/index.d.ts # function、class 和 interface 可以直接默认导出,其他的变量需要先定义出来,再默认导出 export default function foo(): string; export default Directions; declare enum Directions { Up, Down, Left, Right }
npm包型 - 先声明,在export
// types/foo/index.d.ts declare const name: string; declare function getName(): string; declare class Animal { constructor(name: string); sayHi(): string; } declare enum Directions { Up, Down, Left, Right } #interface 前是不需要 declare interface Options { data: any; } export { name, getName, Animal, Directions, Options };
module 拓展
// types/foo-bar.d.ts declare module 'foo' { export interface Foo { foo: string; } } declare module 'bar' { export function bar(): string; } // src/index.ts import { Foo } from 'foo'; import * as bar from 'bar'; let f: Foo; bar.bar();
三斜线指令
- 书写一个全局变量的声明文件
- 依赖一个全局变量的声明文件
// types/jquery-plugin/index.d.ts /// <reference types="jquery" /> declare function foo(options: JQuery.AjaxSettings): string;
ts文件tsc自动生成声明文件
- 命令行参数
--declaration(简写 -d)
- tsconfig.json
{ "compilerOptions": { "module": "commonjs", "outDir": "lib", "declaration": true, } }
ts发布
- 发布到社区
@types 是统一由 DefinitelyTyped 管理的。要将声明文件发布到 @types 下,就需要给 DefinitelyTyped 创建一个 pull-request,其中包含了类型声明文件,测试代码,以及 tsconfig.json 等。
- 与源码一起(依次查找*.d.ts)
- 1. 给 package.json 中的 types 或 typings 字段指定一个类型声明文件地址
- 2. 在项目根目录下,编写一个 index.d.ts 文件
- 3. 针对入口文件(package.json 中的 main 字段指定的入口文件),编写一个同名不同后缀的 .d.ts 文件
参考
欢迎关注我们【前端漫漫】,了解最新文章动态
联系邮箱:simple2012hcz@126.com
-
class ts 扩展方法_ts类型声明文件的正确使用姿势
2020-12-21 12:30:15ts类型声明文件的正确使用姿势ts声明文件类型npm install @types/jquery --save-dev与npm一同发布解释: package.json 中有 types 字段,或者有一个 index.d.ts 声明文件自给自足型创建一个 node_modules/@types/foo...ts类型声明文件的正确使用姿势
ts声明文件类型
npm install @types/jquery --save-dev
与npm一同发布
解释: package.json 中有 types 字段,或者有一个 index.d.ts 声明文件
自给自足型
创建一个 node_modules/@types/foo/index.d.ts 文件,存放 foo 模块的声明文件。不太建议用这种方案,一般只用作临时测试。
创建一个 types 目录,专门用来管理自己写的声明文件,将 foo 的声明文件放到 types/foo/index.d.ts 中。这种方式需要配置下 tsconfig.json 中的 paths 和 baseUrl 字段。
/path/to/project
├── src
| └── index.ts
├── types
| └── foo
| └── index.d.ts
└── tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"baseUrl": "./",
"paths": {
"*": ["types/*"]
}
}
}
ts声明文件书写姿势
全局型
# let
declare let jQuery: (selector: string) => any;
# function
declare function jQuery(selector: string): any;
#class
declare class Animal {
name: string;
constructor(name: string);
sayHi(): string;
}
#enum
declare enum Directions {
Up,
Down,
Left,
Right
}
#namespace
declare namespace jQuery {
function ajax(url: string, settings?: any): void;
namespace fn {
function extend(object: any): void;
}
}
npm包型 - export
// types/foo/index.d.ts
export const name: string;
export function getName(): string;
export class Animal {
constructor(name: string);
sayHi(): string;
}
export enum Directions {
Up,
Down,
Left,
Right
}
export interface Options {
data: any;
}
export namespace foo {
const name: string;
namespace bar {
function baz(): string;
}
}
npm包型 - export default
// types/foo/index.d.ts
# function、class 和 interface 可以直接默认导出,其他的变量需要先定义出来,再默认导出
export default function foo(): string;
export default Directions;
declare enum Directions {
Up,
Down,
Left,
Right
}
npm包型 - 先声明,在export
// types/foo/index.d.ts
declare const name: string;
declare function getName(): string;
declare class Animal {
constructor(name: string);
sayHi(): string;
}
declare enum Directions {
Up,
Down,
Left,
Right
}
#interface 前是不需要 declare
interface Options {
data: any;
}
export { name, getName, Animal, Directions, Options };
module 拓展
// types/foo-bar.d.ts
declare module 'foo' {
export interface Foo {
foo: string;
}
}
declare module 'bar' {
export function bar(): string;
}
// src/index.ts
import { Foo } from 'foo';
import * as bar from 'bar';
let f: Foo;
bar.bar();
三斜线指令
书写一个全局变量的声明文件
依赖一个全局变量的声明文件
// types/jquery-plugin/index.d.ts
///
declare function foo(options: JQuery.AjaxSettings): string;
ts文件tsc自动生成声明文件
命令行参数
--declaration(简写 -d)
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"outDir": "lib",
"declaration": true,
}
}
ts发布
发布到社区
@types 是统一由 DefinitelyTyped 管理的。要将声明文件发布到 @types 下,就需要给 DefinitelyTyped 创建一个 pull-request,其中包含了类型声明文件,测试代码,以及 tsconfig.json 等。
与源码一起(依次查找*.d.ts)1. 给 package.json 中的 types 或 typings 字段指定一个类型声明文件地址
2. 在项目根目录下,编写一个 index.d.ts 文件
3. 针对入口文件(package.json 中的 main 字段指定的入口文件),编写一个同名不同后缀的 .d.ts 文件
参考
欢迎关注我们【前端漫漫】,了解最新文章动态!联系邮箱:simple2012hcz@126.com
-
ts自动编译声明文件_ts类型声明文件的正确使用姿势
2021-01-09 12:04:26ts声明文件类型https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types已定义 npm install @types/jquery --save-dev与npm一同发布解释: package.json 中有 types 字段,或者有一个 index.d.ts ...ts声明文件类型
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types已定义
npm install @types/jquery --save-dev
与npm一同发布
解释: package.json 中有 types 字段,或者有一个 index.d.ts 声明文件
自给自足型
- 创建一个 node_modules/@types/foo/index.d.ts 文件,存放 foo 模块的声明文件。不太建议用这种方案,一般只用作临时测试。
- 创建一个 types 目录,专门用来管理自己写的声明文件,将 foo 的声明文件放到 types/foo/index.d.ts 中。这种方式需要配置下 tsconfig.json 中的 paths 和 baseUrl 字段。
/path/to/project ├── src | └── index.ts ├── types | └── foo | └── index.d.ts └── tsconfig.json
{ "compilerOptions": { "module": "commonjs", "baseUrl": "./", "paths": { "*": ["types/*"] } }}
ts声明文件书写姿势
全局型
# let declare let jQuery: (selector: string) => any;# function declare function jQuery(selector: string): any;#class declare class Animal { name: string; constructor(name: string); sayHi(): string;}#enumdeclare enum Directions { Up, Down, Left, Right}#namespace declare namespace jQuery { function ajax(url: string, settings?: any): void; namespace fn { function extend(object: any): void; }}
npm包型 - export
// types/foo/index.d.tsexport const name: string;export function getName(): string;export class Animal { constructor(name: string); sayHi(): string;}export enum Directions { Up, Down, Left, Right}export interface Options { data: any;}export namespace foo { const name: string; namespace bar { function baz(): string; }}
npm包型 - export default
// types/foo/index.d.ts# function、class 和 interface 可以直接默认导出,其他的变量需要先定义出来,再默认导出export default function foo(): string;export default Directions;declare enum Directions { Up, Down, Left, Right}
npm包型 - 先声明,在export
// types/foo/index.d.tsdeclare const name: string;declare function getName(): string;declare class Animal { constructor(name: string); sayHi(): string;}declare enum Directions { Up, Down, Left, Right}#interface 前是不需要 declareinterface Options { data: any;}export { name, getName, Animal, Directions, Options };
module 拓展
// types/foo-bar.d.tsdeclare module 'foo' { export interface Foo { foo: string; }}declare module 'bar' { export function bar(): string;}// src/index.tsimport { Foo } from 'foo';import * as bar from 'bar';let f: Foo;bar.bar();
三斜线指令
- 书写一个全局变量的声明文件
- 依赖一个全局变量的声明文件
// types/jquery-plugin/index.d.ts/// declare function foo(options: JQuery.AjaxSettings): string;
ts文件tsc自动生成声明文件
- 命令行参数
--declaration(简写 -d)
- tsconfig.json
{ "compilerOptions": { "module": "commonjs", "outDir": "lib", "declaration": true, }}
ts发布
- 发布到社区
@types 是统一由 DefinitelyTyped 管理的。要将声明文件发布到 @types 下,就需要给 DefinitelyTyped 创建一个 pull-request,其中包含了类型声明文件,测试代码,以及 tsconfig.json 等。
- 与源码一起(依次查找*.d.ts)
1. 给 package.json 中的 types 或 typings 字段指定一个类型声明文件地址 2. 在项目根目录下,编写一个 index.d.ts 文件 3. 针对入口文件(package.json 中的 main 字段指定的入口文件),编写一个同名不同后缀的 .d.ts 文件
参考
- https://ts.xcatliu.com/basics/declaration-files
本文作者:前端漫谈(CheongHu)
联系邮箱:simple2012hcz@126.com
-
typescript之typings(*.d.ts类型声明)
2021-03-03 12:53:47参考微信小程序官方ts基础工程: tsconfig.json 类型引入之后,就可以在我们的ts代码中,直接调用wx 相关方法,编译期不会报错,运行期必须在微信环境下! -
boolean类型_快速编写第三方包 .d.ts 类型声明指南
2020-11-23 12:04:55随着微软的大力推广,越来越多的开发者开始使用 TypeScript,TypeScript 正在变得越来越流行,前端开发者们开始体验到静态类型的强大,并开始告别『动态一时爽,重构火葬场』的尴尬境地。但同时,目前仍有大量第三方... -
class ts 扩展方法_快速编写第三方包 .d.ts 类型声明指南
2021-01-04 05:42:14随着微软的大力推广,越来越多的开发者开始使用 TypeScript,TypeScript 正在变得越来越流行,前端开发者们开始体验到静态类型的强大,并开始告别『动态一时爽,重构火葬场』的尴尬境地。但同时,目前仍有大量第三方... -
TS类型断言简化对象类型声明
2020-10-09 20:22:05TS类型断言简化对象类型声明 前言 在使用了 typescript 的项目开发中,有时候为了某个对象进行声明,经常需要写完 interface 之后,在赋值的时候又写了一遍一模一样的代码;当想对它增加一个键值,又得去增加 ... -
TS入门笔记1——TS的类型声明
2020-10-06 20:48:45TS入门笔记1——TS的类型声明 简单快速上手ts的学习路径: 一、熟悉掌握熟悉的强类型定义,初步学习编写强类型代码。 学习ts的声明变量类型,能够初步编写强类型代码; 学习ts的接口,进一步强定义对象的丰富属性... -
ieda ts文件报错_TS入门笔记1——TS的类型声明
2021-01-02 00:33:17TS入门笔记1——TS的类型声明 简单快速上手ts的学习路径: 一、熟悉掌握熟悉的强类型定义,初步学习编写强类型代码。 1.学习ts的声明变量类型,能够初步编写强类型代码; 2.学习ts的接口,进一步强定义对象的丰富属性... -
ts 声明变量类型
2018-07-07 21:08:39ts中,声明变量时可以同时指定其类型,格式:var name: string = 'Forrest'; 这样,当 name = 1; 会报错,因为name已经指定了string类型如果想指定变量为可变类型,可以:var name: any = 'Forrest';注意,即使name...