TypeScript λ²μ : 2.1.0-dev.20161008
λ¬Έμ λ₯Ό μ€λͺ νκΈ°μν μ΅μ ReactNative κ΅¬μ± μμ :
import React, { Component } from 'react';
import { StyleSheet, Text } from 'react-native';
export class Sample extends Component<{}, {}> {
render() {
return (
<Text style={styles.text}>Hello TypeScript</Text> // error on styles, see below
);
}
}
const styles = StyleSheet.create({
text: {
position: 'absolute', // cause of the error: string instead of 'absolute'
top: 0,
left: 0
}
});
μ€λ₯:
error TS2322: Type '{ position: string; top: number; left: number; }' is not assignable to type 'TextStyle | undefined'.
Type '{ position: string; top: number; left: number; }' is not assignable to type 'TextStyle'.
Types of property 'position' are incompatible.
Type 'string' is not assignable to type '"absolute" | "relative" | undefined'.
λ°μ ν μ μΈμ΄ λ¬Έμμ΄μ μ¬μ©νμ§ μκ³ κ°λ₯ν λ¬Έμμ΄ μ§ν© λ§ νμ©νλ€λ μ μ΄ λ§μμ λλλ€.
TypeScriptκ° μ΄κ²μ 'μ λ'μ νμΌλ‘ μΆλ‘ νλλ‘νλ λ°©λ²μ΄ μμ΅λκΉ?
μ΄ position
νλλ₯Ό μ½κΈ° μ μ©μΌλ‘ νμ ν μ μλ€λ©΄ 'absolute'μ νμΌλ‘ μΆλ‘ ν μ μμ΅λλ€.
# 10676κ³Ό κ΄λ ¨μ΄ μμ΅λκΉ?
λλ μΊμ€ν μ μ’μνμ§ μμΌλ©° κ°λ₯ν ν λ°©μ§νμ§ μμ§λ§ ν΄κ²° λ°©λ²μ λ€μκ³Ό κ°μ΅λλ€.
const styles = StyleSheet.create({
text: {
position: 'absolute',
top: 0,
left: 0
} as React.TextStyle // cast to existing interface
});
λ΄λ³΄λΌ μΈν°νμ΄μ€κ°μλ κ²½μ° (μ¬κΈ° : TextStyle), νλ λ§ μΊμ€ν ν μ μμ΅λλ€.
const styles = StyleSheet.create({
text: {
position: 'absolute' as 'absolute', // cast string to type 'absolute'
top: 0,
left: 0
}
});
μ΄κ²μ https://github.com/Microsoft/TypeScript/pull/19966 κ³Ό κ΄λ ¨μ΄
λ€μκ³Ό κ°μ κ²½μ° μΌ μλ μμ΅λλ€. https://github.com/Microsoft/TypeScript/issues/21618#issuecomment -362945112
κ°μ₯ μ μ©ν λκΈ
λλ μΊμ€ν μ μ’μνμ§ μμΌλ©° κ°λ₯ν ν λ°©μ§νμ§ μμ§λ§ ν΄κ²° λ°©λ²μ λ€μκ³Ό κ°μ΅λλ€.
λ΄λ³΄λΌ μΈν°νμ΄μ€κ°μλ κ²½μ° (μ¬κΈ° : TextStyle), νλ λ§ μΊμ€ν ν μ μμ΅λλ€.