分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等

作用让第三方库支持 ts，如何你编写了一个第三方库，你也可以写一个声明文件，这样编译的时候就不会报错了命名方式xxx.d.ts，推荐放在根目录下如何下载一般比较大牌的第三方js插件在npm上都有对应的声明文件，比如jquery的声明文件就可以在npm上下载：npm i @types/jquery比如在 react 中使用 ts 的时候就需要引入 yarn add @types/react @types/react-dom，具体看 https://blog.youkuaiyun.com/weixin_43

interface Person { name: string; age: number;}extendsK extend keyof T 表示 K 是 T 的子类型，这里是一个类型约束声明。比如 type T = "a" | "b" | "c";，那么 K 可以是 "a"，也可以是 "a" | "c" 或者 "a" | "b" | "c" 等function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {

https://www.tslang.cn/docs/handbook/advanced-types.html例子1这三个 keyof 效果相同，直接生成一个联合属性 name | ageclass KeyCls0 { name: string; age: number;};interface KeyCls1 { name: string; age: number;};type KeyCls2 = { name: string, age: number};f

字符串/数字 字面量类型字符串字面量类型允许你指定字符串必须的固定值。 在实际应用中，字符串字面量类型可以与联合类型，类型保护和类型别名很好的配合。 通过结合使用这些特性，你可以实现类似枚举类型的字符串。字面量类型// 字符串字面量类型type Easing = "ease-in" | "ease-out" | "ease-in-out";// 数字字面量类型function rollDie(): 1 | 2 | 3 | 4 | 5 | 6 { // ...}枚举数字枚举：//

背景一般我们执行 js 文件，直接 node index.js，那么如何快速的执行 ts 呢？esnonpm i esno -gesno index.ts{ "scripts": { "start": "esno index.ts" }, "dependencies": { "esno": "*" }}参考文档https://github.com/antfu/esno...

交叉类型是将多个类型合并为一个类型。就是说这个类型的对象同时拥有了多种类型的成员。我们大多是在混入（mixins）或其它不适合典型面向对象模型的地方看到交叉类型的使用。 （在JavaScript里发生这种情况的场合很多！） 下面是如何创建混入的一个简单例子：function extend<T, U>(first: T, second: U): T & U { let result = <T & U>{}; for (let id in first)

类型别名type类型别名会给一个类型起个新名字。 类型别名有时和接口很像，但是可以作用于原始值，联合类型，元组以及其它任何你需要手写的类型。type Name = string;type NameResolver = () => string;type NameOrResolver = Name | NameResolver;function getName(n: NameOrResolver): Name { if (typeof n === 'string') {

出处详见 ts 官方文档说明JavaScript里，每个参数都是可选的，可传可不传。 没传参的时候，它的值就是undefined。 在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能。 比如，我们想让last name是可选的：function buildName(firstName: string, lastName?: string) { if (lastName) return firstName + " " + lastName; else

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。定义函数//泛型函数的类型与非泛型函数的类型没什么不同，只是有一个类型参数在最前面，像函数声明一样function createArray<T>(length: number, value: T): Array<T> { let result: T[] = []; for (let i = 0; i < length; i++) {

1、把 this.$router 改为 this['$router']2、对类型进行补充，修改文件vue-shim.d.ts

需要使用这三个：vue-class-componentvue-property-decoratorvuex-classimport Component from 'vue-class-component';import { Component } from 'vue-property-decorator'这里的 vue-property-decorator 完全继承于 vue-class-component，所以都有 Component...

问题我们在 typescript 的项目中安装一些包的话，可能会报错 Could not find a declaration file for module 'xxx' ，这是因为这个包可能不是.ts文件而是.js文件，那么如何解决呢？解决如果有这个包的 ts 版本，则npm install @types/xxx否则，找到根目录下的 shims-vue-d.ts 文件declare module '*.vue' { import Vue from 'vue' export defau

联合类型联合类型表示一个值可以是几种类型之一。 我们用竖线（ |）分隔每个类型，所以 number | string | boolean表示一个值可以是 number， string，或 boolean。function padLeft(value: string, padding: string | number) { // ...}let indentedString = p...

编写一个 TSX 组件import React from 'react' import ReactDOM from 'react-dom'const App = () => { return ( <div>Hello world</div> )}ReactDOM.render(<App />, document.getElementBy...

接口是一系列抽象方法的声明。定义TypeScript 接口定义：interface interface_name { }举例如下定义了一个接口 IPerson，接着定义了一个变量 customer，它的类型是 IPerson。interface IPerson { firstName:string, lastName:string, sayHi: ()...

基本类型原始类型：number，string，boolean，symbol，null或undefined写法参考：let isDone: boolean = false;数组方式一：let list: number[] = [1, 2, 3];方式二：let list: Array<number> = [1, 2, 3];元祖元组类型允许表示一个已知元素数量和类型的数组，...