Typeescript知識点まとめのステップ
7923 ワード
1. タイプのコメントとタイプチェック
//配列の種類
// void タイプ 戻り値のない関数によく使われます.
2. 関数
3. 類型推論
インターフェースは、構造だけを定義して、実現する必要がありません.
Genericsとは、関数、接⼝口または類を定義する際に、予め特定のタイプを指定しないで、өを使用する時に、再びタイプの一つの特性を指定します.
実は工場の関数で、あるオブジェクトに伝えられました.出力先の桜の新しいオブジェクトです.
インストール
装飾器は実際には一つの関数であり、ハイジャックを定義することにより、クラスおよびその構文方法、属性に追加の拡張機能を提供することができる.
let name = "xx"; //
let title:string = "xxxx"; // //配列の種類
let names:string [];
names = ['Tom']; // Array
let foo:any = 'xx';
foo = 3
let list:any[] = [1, true, 'xxxx'];
list[1] = 100; function greeting (person: string):string {
return 'Hello, ' + person
}// void タイプ 戻り値のない関数によく使われます.
function warnUser():void {
alert('this is my warning message')
}2. 関数
// name age
// ？
//
function sayHello(name: string, age:number = 20, addr?:string): string {
return ' ： ' + name + ' ' + age
}
//
//
// ，
function info(a: { name: string }): string;
function info(a: string): object;
function info(a: { name: string } |string): any {
if (typeof a==="object") {
return a.name;
} else {
return { name: a };
}
console.log(info({ name: "tom" }));
console.log(info("tom"));3. 類型推論
class MyComp {
private _foo: string; //
private bar: string; //
readonly mua = 'mua' //
// ：
// ，
constructor (private tua = 'tua') {
this._foo = 'foo'
this.bar = 'bar'
}
//
private someMethod() {}
// ： ； vue
get foo() {return this._foo}
set foo(val) {this._foo = val}
}
vue ： ，Hello.vue
// ，
class Feature {
constructor(public id: number, public name: string) {}
}
//
@Component
export default class HelloWorld extends Vue {
private features: Feature[];
constructor() {
super();
this.features = [
{ id: 1, name: " " },
{ id: 2, name: " " }
];
}
}
vue ： getter
get count() {
return this.features.length;
}
class ， 。
class Person { //
constructor(name, age) { // constructor ， new
this.name = name; // ， this
this.age = age;
}
say() { //
return ' ' + this.name + ' ' + this.age + ' '
}
}
console.log(typeof Person); // function
console.log(Person === Person.prototype.constructor); // true
//
function Person (name, name) {
this.name = name
this.age = age
}
Person.prototype.say = function() {
return ' ' + this.name + ' ' + this.age + ' '
}インターフェースは、構造だけを定義して、実現する必要がありません.
interface Person {
firstName: string;
lastName: string;
sayHello(): string //
}
//
class Greeter implements Person {
constructor(public firstName='', public lastName='') {}
sayHello() {
return 'hello, ' + this.firstName + ' ' this.lastName
}
}
//
function greeting (person: Person) {
return person.sayHello()
}
// const user = {firstName: 'jane', lastName: 'user'}
const user = new Greeter('jane', 'user') //
console.log(user);
console.log(greeting(user));
Genericsとは、関数、接⼝口または類を定義する際に、予め特定のタイプを指定しないで、өを使用する時に、再びタイプの一つの特性を指定します.
//
interface Result {
ok: 0 | 1;
data: T[];
}
//
function getData(): Result {
const data: any[] = [
{id: 1, name: ' ', version: '2.0'},
{id: 1, name: ' ', version: '2.0'},
]
return {ok: 1, data};
}
//
this.features = getData().data; function getData(): Promise> {
const data: any[] = [
{ id: 1, name: " ", version: "2.0" },
{ id: 2, name: " ", version: "1.0" }
];
return Promise.resolve>({ ok: 1, data });
} async created() {
const result = await getData();
this.features = result.data;
} 実は工場の関数で、あるオブジェクトに伝えられました.出力先の桜の新しいオブジェクトです.
//
@Component
export default class Hello extends Vue {
//
@Prop({ required: true, type: String }) private msg!: string;
//
@Watch("features", {deep: true})
onFeaturesChange(val: string, oldVal: any) {
console.log(val, oldVal);
}
//
@Emit('add')
private addFeature(event: any) {
const feature = {
name: event.target.value,
id: this.features.length + 1,
version: "1.0"
};
this.features.push(feature);
event.target.value = feature;
return event.target.value;
}
}インストール
npm i vuex-class -Sexport default new Vuex.Store({
state: {
features: [' ', ' ']
},
mutations: {
addFeatureMutation(state: any, featureName: string){
state.features.push({id: state.features.length+1, name: featureName})
}
},
actions: {
addFeatureAction({commit}, featureName: string) {
commit('addFeatureMutation', featureName)
}
}
})import { State, Action, Mutation } from "vuex-class";
@Component
export default class Feature extends Vue {
// 、 、
@State features!: string[];
@Action addFeatureAction;
@Mutation addFeatureMutation;
private addFeature(event) {
console.log(event);
// this.features.push(event.target.value);
this.addFeatureAction(event.target.value);
// this.addFeaturMutation(event.target.value);
event.target.value = "";
}
}装飾器は実際には一つの関数であり、ハイジャックを定義することにより、クラスおよびその構文方法、属性に追加の拡張機能を提供することができる.
function log(target: Function) {
// target
console.log(target === Foo); // true
target.prototype.log = function () {
console.log(this.bar);
}
// ， 。
}
//
function dong(target: any, name: string, descriptor: any) {
// target ，name ，descriptor ，
// ：Object.defineProperty(target, name, descriptor)
console.log(target[name] === descriptor.value);
// descriptor.value bar
const baz = descriptor.value; //
descriptor.value = function (val: string) {
console.log('dong~~');
baz.call(this, val);
}
return descriptor;
}
//
function mua(target, name) {
// target ，name
console.log(target === Foo.prototype);
target[name] = 'mua~~~'
}
@log
class Foo {
bar = 'bar'
@mua ns!: string;
@dong
baz(val: string) {
this.bar = val
}
}
const foo2 = new Foo();
// @ts-ignore
foo2.log();
console.log(foo2.ns);
foo2.baz('lalala')