小编jku*_*chi的帖子

在分析不同CSS动画类型的jQuery鼠标事件时,我注意到translate3d导致悬停和其他事件无法正确触发.

在一个基本示例中,我从右到左为动画块列表设置动画.

在翻转时,我将悬停的LI背景设置为GREEN.

注意:为webkit构建测试

HTML

 <div class="container">
    <ul>
        <li>content</li>
        <li>content</li>
        ...
    </ul>
</div>

CSS

.container{
    position: absolute;
    left: 600px;
    top: 0;
}   

.container ul{
    list-style: none;
    width: 9999px;
}

.container ul li{
    width: 200px;
    height: 400px;
    float: left;
    background: red;
    margin: 4px;
}

.animate-3d{
    -webkit-transition: -webkit-transform 10s linear;
    -webkit-transform: translate3d(-6000px, 0px, 0px)
}

.animate-transition{
    transition: left 10s linear;
    left: -6000px;
}

jQuery的

$('.event').bind('click', function(){
    $('.container').addClass('animate-3d'); 
});

$('.event-transition').bind('click', function(){
    $('.container').addClass('animate-transition'); 
});

$('li').bind('mouseenter mouseleave', function(e){
    if(e.type == 'mouseenter')
        $(this).css('background', 'green');
    else
        $(this).css('background', …

我很好奇如何正确地输入关于泛型的函数参数。

看下面的基本示例，我有2个功能：- sayHello＆runAnyFunction

现在，第一个调用sayHello显然是一个错误，传递给函数的数据没有name参数。完美和期望。

问题出在下一部分，那里有一个函数runAnyFunction，该函数将一个函数作为其第一个参数，obj作为其第二个参数，并简单地运行obj作为参数传递的函数。

下面的示例中的以下2个函数将通过打字稿检查没有问题，这就是我的问题。

runAnyFunction<Person>(sayHello, {
  name: "Bob"
});

runAnyFunction<Monster>(sayHello, {
  size: "HUGE"
});

我知道第二个电话会给我一个Hello undefined，这是不希望的。理想情况下，我希望此调用使类型检查失败，因为这不应该被允许。

我的想法是这里的罪魁祸首是fn函数参数，因为它自己的obj参数将被推断为any，但是我很难为此编写正确的类型。

我知道在这个演示中，我runAnyFunction的函数实际上只是运行任何函数，但是如果有一种首选的方式来键入具有这种性质的函数，我很想知道。

如何正确输入？

代码样例

// demo.ts

type Fn = (obj) => string;

interface Person {
  name: string;
}

interface Monster {
  size: string;
}

const somePerson: Person = {
  name: "Bob"
};

const someMonster: Monster = {
  size: "HUGE"
}; …